<template>
  <div class="party container">
    <div class="entering_title">
      <h3>党团建设</h3>
      <p>PARTY ORGANIZATION</p>
    </div>
    <p class="party_title">2001年，九州通率先在全省成立湖北省第一家非公企业党组织---湖北九州通党支部，2004年成立九州通集团党委，现下辖3个党总支，34个党支部，截止2020年8月30日，全集团在册党员1285名，拥有专职党务工作者3名，兼职党务工作者70余名，党的基层组织涵盖了广东、北京、上海、河南、新疆等28个省级子公司，形成了以集团党委为轴心，辐射全国的网络组织体系，2011年8月，九州通集团荣获全国“双强百佳党组织”，标志着集团党建工作走入全国先进行列。</p>
    <el-tabs v-model="activeName">
      <el-tab-pane label="主题文化活动" name="frist">
        <ul class="party_content">
          <li v-for="(cItem,cindex) in culture" :key="cindex" class="party_content_li">
            <img :src="'http://officialweb.obs.cn-north-4.myhuaweicloud.com/'+cItem.PictureUrl" alt="">
            <span class="party_content_title">{{cItem.Title}}</span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="先模人物" name="second">
        <ul class="party_content">
          <li v-for="(cItem,cindex) in figure" :key="cindex" class="party_content_li">
            <img :src="'http://officialweb.obs.cn-north-4.myhuaweicloud.com/'+cItem.PictureUrl" alt="">
            <span class="party_content_title">{{cItem.Title}}</span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="社会责任" name="third">
        <ul class="party_content">
          <li v-for="(cItem,cindex) in responsibility" :key="cindex" class="party_content_li">
            <img :src="'http://officialweb.obs.cn-north-4.myhuaweicloud.com/'+cItem.PictureUrl" alt="">
            <span class="party_content_title">{{cItem.Title}}</span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="红色引擎" name="fourth">
        <ul class="party_content">
          <li v-for="(cItem,cindex) in engine" :key="cindex" class="party_content_li">
            <img :src="'http://officialweb.obs.cn-north-4.myhuaweicloud.com/'+cItem.PictureUrl" alt="">
            <span class="party_content_title">{{cItem.Title}}</span>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getPartyData} from 'api/api'
export default {
  data () {
    return {
      activeName: 'frist',
      culture: [],
      figure: [],
      responsibility: [],
      engine: []
    }
  },
  mounted () {
    getPartyData()
    .then((res)=>{
      this.culture = []
      this.figure = []
      this.responsibility = []
      this.engine = []
      res.forEach(item => {
        switch (item.Type) {
          case 1:
            this.culture.push(item)
            break;
          case 2:
            this.figure.push(item)
            break;
          case 3:
            this.responsibility.push(item)
            break;
          case 4:
            this.engine.push(item)
            break;
          default:
            break;
        }
      })
      // console.log(this.culture)
    })
  }
}
</script>

<style lang="scss" scoped>
.party{
  .party_title{
    width: 100%;
    font-size: 14px;
    color: #333;
    text-align: left;
   
  }
  .party_content{
    display: flex;
    flex-wrap: wrap;
    .party_content_li{
      position: relative;
      img{
        width: 290px;
        height: 210px;
        margin-right: 30px;
        margin-bottom: 30px;
      }
      .party_content_title{
        display: block;
        font-size: 13px;
        line-height: 30px;
        color: #fff;
        width: 290px;
        height: 30px;
        text-align: center;
        position: absolute;
        bottom: 34px;
        left: 0;
        z-index: 10;
        background: rgba(89,163,255,0.8);
      }
    }
  }
}
</style>

<style lang="scss">
.party{
  .el-tabs{
    .el-tabs__nav-wrap::after{
      display: none;
    }
    .el-tabs__nav{
      border:1px solid #4276EF;
      margin: 80px 0 80px 260px ;
      .el-tabs__active-bar{
        display: none;
      }
      .el-tabs__item{
        padding: 0;
        width: 118px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        &.is-active{
          color: white;
          background-color: #4276EF;
        }
      }
    }
  }
}
</style>
